<template>
	<view>
		<!-- 帖子详情页详细信息 -->
		<common-list :item="info" isdetail @follow="follow" @doSupport="doSupport" @doComment="doComment" @doShare="doShare">
			<text>{{info.content}}</text>
			<view>
				<image v-for="(item,index) in info.images" :key="index" :src="item.url" class="w-100" mode="widthFix" @click="preview(index)"></image>
			</view>
		</common-list>
		<!-- 分割线 -->
		<divider></divider>
		<view class="p-2 font-md font-weight-bold">
			最新评论 3
		</view>
		<view class="px-2">
			<view class="uni-comment-list">
				<view class="uni-comment-face">
					<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<text>小猫咪</text>
					</view>
					<view class="uni-comment-content">支持国产，支持DCloud</view>
					<view class="uni-comment-date">
						<view>2天前</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空占位，设置高度等同于bottom-input组件的高度，以解决底部被遮挡问题 -->
		<view style="height: 100rpx;"></view>
		<!-- 发布评论输入框 -->
		<bottom-input @submit="submit"></bottom-input>
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue'
	import bottomInput from '@/components/common/bottom-input.vue'
	export default {
		components: {
			commonList,
			bottomInput
		},
		computed: {
			// 图片url数组，用于图片预览
			imageList() {
				return this.info.images.map(item => item.url)
			}
		},
		data() {
			return {
				// 当前帖子信息
				info: {
					username: "昵称1",
					userpic: "/static/default.jpg",
					newstime: "2019-10-20 下午04:30",
					isFollow: false,
					title: "我是标题1",
					titlepic: "/static/demo/datapic/11.jpg",
					support: {
						type: "support",
						support_count: 1,
						unsupport_count: 2
					},
					comment_count: 2,
					share_num: 2,
					content: '帝莎编程学院：uni-app第二季仿商城类实战项目开发，uni-app第二季仿微信实战项目开发',
					images: [{
						url: '/static/demo/1.jpg'
					}, {
						url: '/static/demo/2.jpg'
					}, {
						url: '/static/demo/3.jpg'
					}, {
						url: '/static/demo/4.jpg'
					}]
				}
			}
		},
		onLoad(e) {
			if (e.detail) {
				this.__init(JSON.parse(e.detail))
			}
		},
		methods: {
			__init(data) {
				uni.setNavigationBarTitle({
					title: data.title
				})
			},
			// 点击评论
			doComment() {

			},
			// 点击分享
			doShare() {

			},
			// 关注
			follow() {
				this.info.isFollow = true
			},
			// 顶踩
			doSupport(e) {
				// 之前操作过
				if (this.info.support.type === e.type) {
					return uni.showToast({
						title: '你已经操作过了',
						icon: 'none'
					})
				}
				let msg = e.type === 'support' ? '顶' : '踩'
				// 之前没有操作过
				if (this.info.support.type === '') {
					this.info.support[e.type + '_count']++
				} else if (this.info.support.type === 'support' && e.type === 'unsupport') {
					// 顶 - 1
					this.info.support.support_count--
					// 踩 + 1
					this.info.support.unsupport_count++
				} else if (this.info.support.type === 'unsupport' && e.type === 'support') {
					// 顶 + 1
					this.info.support.support_count++
					// 踩 -1 
					this.info.support.unsupport_count--
				}
				this.info.support.type = e.type
				uni.showToast({
					title: msg
				})
			},
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.imageList
				})
			},
			submit(data) {
				console.log(data)
			}
		}
	}
</script>

<style>

</style>
